<template>
  <div class="bigboxs">
    <!-- 左侧盒子 -->
    <div class="leftbox">
      <el-autocomplete
      class="inline-input"
      v-model="filterText"
      style="margin-bottom: 10px;width:100%"
      :fetch-suggestions="querySearch"
      placeholder="输入关键字进行过滤"
      :trigger-on-focus="true"
      value-key="name"
      :debounce='300'
      @select="handleSelect"
    ></el-autocomplete>
      <!-- 树组件 -->
      <div class="treebox">
        <el-tree
          :props="props"
          :load="loadNode"
          :highlight-current="true"
          lazy
          node-key="id"
          :default-expanded-keys="array"
          @node-click="handleNodeClick"
          ref="tree"
          >
          <template slot-scope="{ node, data }">
            <span :style="{
              color:data.collect ?'':data.className=='FactoryStation'?'#999':'',
              'font-size':data.collect ?'':data.className=='FactoryStation'?'14px':''}">
             <img
              :src="'data:image/png;base64,' + data.iconBase64"
              style="
                width: 16px;
                height: 16px;
                margin-right: 5px;
                vertical-align: bottom;"/> {{ node.label }}</span>
          </template>
        </el-tree>
      </div>
    </div>
    <!-- 右侧盒子 -->
    <div class="rightbox">
      <el-tabs v-model="jianKong" @tab-click="handleClick">
        <el-tab-pane label="设备监控" name="shebeijiankong">
          <RealTima ref="shebeijiankong"></RealTima>
        </el-tab-pane>
        <el-tab-pane label="事件告警" name="baojingxinxi">
          <AlarminFormation ref="baojingxinxi"></AlarminFormation>
        </el-tab-pane>
        <!-- <el-tab-pane label="历史趋势" name="lishiqushi">
          <HistoryTrends ref="lishiqushi"></HistoryTrends>
        </el-tab-pane> -->
        <el-tab-pane label="站内图" name="yunxinjiankong">
          <div v-if="isshow" style="height: 100%;">
            <iframe id="myIframe" :src="iframeSrc" frameborder="0"></iframe>
          </div>
        </el-tab-pane>

        <el-tab-pane label="设备档案" name="shebeidangan">
          <!-- <DeviceMonitor ref="shujuliebiao"></DeviceMonitor> -->
          <Ledger ref="shebeidangan"></Ledger>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>

import { getgenjiedianapi, getzijidianapi } from '../../api/monitor'
import { getKeywordListApi } from '@/api/Ledger'
import RealTima from '@/views/tabarpolise/realtime.vue'
import DeviceMonitor from '@/views/tabarpolise/devicemonitor.vue'
import AlarminFormation from '@/views/tabarpolise/alarminformation.vue'
import HistoryTrends from '@/views/tabarpolise/historytrends.vue'
import Ledger from './ledger.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    RealTima,
    DeviceMonitor,
    AlarminFormation,
    HistoryTrends,
    Ledger
  },
  data () {
    return {
      filterText: '',
      jianKong: 'shebeijiankong',
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      array: [],
      entityId: '',
      isshow: false
    }
  },
  async mounted () {
    // this.$refs.shebeijiankong.getmethods()
  },
  computed: {
    iframeSrc () {
      return `${window.location.origin}/graph/single-graph-viewer?stationId=${this.entityId}`
    }
  },
  methods: {
    // 导航栏切换
    handleClick (tab) {
      if (tab.name == 'shujuliebiao') {
        this.$refs.shujuliebiao.getmethods()
      } else if (tab.name == 'shebeijiankong') {
        this.$refs.shebeijiankong.getmethods()
      } else if (tab.name == 'yunxinjiankong') {
        this.isshow = true
        this.entityId = this.$store.state.treedataobj.entityId
      } else if (tab.name == 'baojingxinxi') {
        this.$refs.baojingxinxi.getmethods()
      } else if (tab.name == 'lishiqushi') {
        this.$refs.lishiqushi.getmethods()
      } else if (tab.name == 'shebeidangan') {
        this.$refs.shebeidangan.getmethods()
      }
      // this.isshow = false
    },
    // 树节点搜索
    async querySearch (queryString, cb) {
      const res = await getKeywordListApi({ name: queryString })
      const restaurants = res.data.list
      cb(restaurants)
      // 调用 callback 返回建议列表的数据
    },
    // 搜索选择
    handleSelect (item) {
      const newarr = item.pathId.split(',')
      for (let i = 0; i < newarr.length; i++) {
        if (newarr[i]) {
          this.array.push(newarr[i])
        }
      }
      function getgaoliang (that) {
        const node = that.$refs.tree.getNode(item)
        if (node) {
          that.$refs.tree.setCurrentKey(item.id)
        } else {
          setTimeout(() => {
            getgaoliang(that)
          }, 500)
        }
      }
      getgaoliang(this)
      this.handleNodeClick(item)
    },
    // 设备树点击事件
    async handleNodeClick(val, node) {
      this.$store.commit('setnode',node)
      this.$store.commit('settreedata', val)
      if (this.jianKong == 'shujuliebiao') {
        this.$refs.shujuliebiao.getmethods()
      } else if (this.jianKong == 'shebeijiankong') {
        this.$refs.shebeijiankong.getmethods()
      } else if (this.jianKong == 'yunxinjiankong') {
        this.isshow = true
        this.entityId = this.$store.state.treedataobj.entityId
      } else if (this.jianKong == 'baojingxinxi') {
        this.$refs.baojingxinxi.getmethods()
      } else if (this.jianKong == 'lishiqushi') {
        this.$refs.lishiqushi.getmethods()
      } else if (this.jianKong == 'shebeidangan') {
        this.$refs.shebeidangan.getmethods()
      }
      // this.isshow = false
    },
    // 设备树懒加载
    async loadNode (node, resolve) {
      const res = await getgenjiedianapi({ treeModel: 'DeviceManageTree' })
      // const res = await getzijidianapi()
      const ress = await getzijidianapi(res.data.list[0])
      if (node.level === 0) { // 初始的级数（最顶层）
        this.$store.commit('settreedata', ress.data.list[0])
        resolve(ress.data.list) // 最顶层数据渲染为region
        this.$refs.shebeijiankong.getmethods()
        return this.$refs.tree.setCurrentKey(ress.data.list[0].id)
      }
      if (node.level === 1) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 2) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 3) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 4) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 5) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 6) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
 *{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
 }
 .bigboxs{
  background-color: #f1f1f1;
  padding: 10px;
  display: flex;
  height: 100% !important;
  .leftbox{
    // display: none;
    padding: 15px;
    background-color: #fff;
    width: 300px;
    height: 100%;
    margin-right: 10px;
    .treebox{
  margin-top:10px;
  width:100%;
  height:calc(100% - 55px);
  // border:1px solid #ccc;
  overflow: hidden;
  overflow-y: auto;
}
  }
  .rightbox{
    // flex: 1;
    width: calc(100% - 310px) !important;
    // width: 70%;
    height: 100% !important;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    .table{
      margin-top: 10px;
       height:95% !important;
      //  width: calc(100% - 350px);
      width: 98%;
      .littlebox{
        display: flex;
        flex-wrap: wrap;
        // justify-content: flex-start;
        // justify-content: space-around;
        align-content: flex-start;
        overflow: hidden;
        overflow: auto;
        height: 100%;
        width: 100%;
        .little{
        // width: 32%;
        flex-shrink: 0;
        height: 123px;
        padding: 20px;
        flex-shrink: 0;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-bottom: 10px;
        margin-right: 10px;
                .title{
          display: flex;
          justify-content: space-between;
          button{
            color: #2194ff;
            border: none;
            background-color: #fff;
          }
        }
        .number{
          font-size: 20px;
          font-weight: 700;
          margin: 8px 0;
        }
        .time{
          font-size: 14px;
          color: #999;
        }
      }
      }

    }
    .input{
      height: 34px;
      display: flex;
      justify-content: left;
      .spanicon{
      display: inline-block;
      width: 32px;
      height: 32px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 32px;
    }
    .spantiao{
      width: 76px;
      height: 32px;
      background-color: #f1f1f1;
      margin-left: 10px;
      text-align: center;
      // line-height: 32px;
      // padding: 2px;
      padding-top: 2px;
      .bgc{
        width: 36px;
        height: 28px;
        line-height: 28px;
      }
      .fff{
        background-color: #fff;
      }
    }
    }
  }
 }
 ::v-deep .el-input__inner{
  border-radius: 0px !important;
 }
//  ::v-deep .el-tabs--top{
//   height: 95% !important;
//  }
//  ::v-deep .el-tabs__content{
//   height: 95% !important;
//  }
//  ::v-deep .el-tab-pane{
//   height: 100% !important;
//  }
//  ::v-deep .el-dialog__header{
//   display: none;
// }
.option{
  padding-left: 10px;
}
::v-deep .el-tree-node__content {
  font-size: 14px; /* 修改为你想要的字体大小 */
}
#myIframe{
  width: 100%;
  height: 100%;
}
::v-deep .el-tabs{
  height: 100%;
}
::v-deep .el-tabs--top{
  height: 100%;
}
::v-deep .el-tabs__content{
  height: 95%;
}
::v-deep #pane-shujuliebiao{
  height: 100% !important;
}
::v-deep #pane-yunxinjiankong{
  height: 100% !important;
}
::v-deep #pane-baojingxinxi{
  height: 100% !important;
}
::v-deep #pane-lishiqushi{
  height: 100% !important;
}
::v-deep #pane-shebeijiankong{
  height: 100% !important;
}
::v-deep #pane-shebeidangan{
  height: 100% !important;
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background-color: #bae7ff !important;
}
::v-deep .el-tree-node__content{
  &:hover{
    background-color: #f0f7ff;
  }
}
</style>
